<template>
  <div class="rule">
    <div class="content">
      <h2>活动说明</h2>
      <div class="time">
        <h3>1.线上博饼时间：</h3>
        <p>2018年9月21日-2018年9月25日</p>
      </div>
      <div class="activity-rules">
        <h3>2.活动规则：</h3>
        <p>（1）进入活动页面即可参加;</p>
        <p>（2）每日可免费博饼十次；</p>
        <p>（3）关注“千钟美酒”微信公众号可免费获得额外十次博饼机会；</p>
        <a href="/pages/noPublic/main">点击立即关注</a>
      </div>
      <div class="integral">
        <h3>3.积分规则：</h3>
        <p>博饼得分根据博饼结果自动计算，积分从0分到2000分不等</p>
        <div>
          <img src="/static/img/guize.jpg">
        </div>
      </div>
    </div>
    <navigation :displayCondition="ruleData"></navigation>
  </div>
</template>

<script>
import navigation from '@/components/navigation'
export default {
  data () {
    return {
      ruleData: 'rule'
    }
  },
  components: {
    navigation
  }
}
</script>

<style scoped>
.rule {
  background-color: #EA5149;
  font-size: 16px;
  height: 1400rpx;
}

.rule .content {
  width: 710rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 1200rpx;
  margin-bottom: 20rpx;
}

.rule .content h2 {
  margin: 0 auto;
  width: 220rpx;
  background-color: #FC0;
  font-size: 17px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
}

.rule .content .activity-rules a{
  width: 230rpx;
  background-color: #FC0;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
  margin-top: 20rpx;
}
</style>
